<template>
    <div class="mx-auto max-w-[600px] w-full left-0 right-0">
        <div class="main p-4 pt-8 mb-[70px]">
            <router-view />
        </div>
        <div
            v-if="['/m/mine', '/m/park-record', '/m/park-space'].includes(route.path)"
            class="tab-bar fixed bottom-0 w-full flex mx-auto max-w-[600px] bg-white b-t-1 b-solid b-slate-200 h-[60px]"
        >
            <router-link
                to="/m/park-space"
                class="flex-1 flex flex-col justify-center items-center"
                :class="{'active': route.path === '/m/park-space'}"
            >
                <div>
                    <el-icon size="30px"><Search /> </el-icon>
                </div>
                <div class="">停车位</div>
            </router-link>
            <router-link
                to="/m/park-record"
                class="flex-1 flex flex-col justify-center items-center"
                :class="{'active': route.path === '/m/park-record'}"
            >
                <div class="">
                    <el-icon size="30px"><Tickets /> </el-icon>
                </div>
                <div class="">停车记录</div>
            </router-link>
            <router-link
                to="/m/mine"
                class="flex-1 flex flex-col justify-center items-center"
                :class="{'active': route.path === '/m/mine'}"
            >
                <div class="">
                    <el-icon size="30px"><User /> </el-icon>
                </div>
                <div class="">我的</div>
            </router-link>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RouterLink, useRoute } from 'vue-router';

const route = useRoute()
</script>

<style scoped>
.active {
    color: #409eff;
}
</style>
